<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.文本操作</title>
</head>
<body>
<!-- 
     文本操作
        1. 操作普通文本
        2. 操作超文本
 -->
      <button onclick="handlerGetText()">获取文本操作</button>
      <button onclick="handlerSetText()">设置文本操作</button>
      <button onclick="handlerGetHTML()">获取超文本操作</button>
      <button onclick="handlerSetHTML()">设置超文本操作</button>
      <div id="divNode">
        xxxxx
      </div>

      <script>
        /*
           innerText: 设置/获取 普通文本  不能解析html超文本
           innerHTML: 设置/获取 普通/超级文本的  可以解析html标签的
        */

         function handlerGetText() {

             var text =  divNode.innerText
             console.log(text);

         }

         function handlerSetText() {
            divNode.innerText = "####"

            divNode.innerText = "<h1>xxxx</h1>"
        }

        function handlerSetHTML() {
           // divNode.innerHTML = "<h1>xxxx</h1>"
            divNode.innerHTML = "######"
        }

        function handlerGetHTML() {
            console.log(  divNode.innerHTML);

        }

      </script>
    
</body>
</html>